<!-- 
 * @description: 
 * @fileName: tabbar.vue 
 * @author: 自己的名字 
 * @date: 2025-07-19 09:31:44
 * @version: V1.0.0 
!-->
<script setup lang='ts'>
import { onShow } from '@dcloudio/uni-app'
const tabbar = reactive({
    current: 0,
    list: [
        {
            pagePath: '/pages/index/index',
            // iconPath: homeIcon,
            // selectedIconPath: homeTintIcon,
            text: '首页',
        },
        {
            pagePath: '/pages/products/index',
            text: '产品',
            // iconPath: workbenchIcon,
            // selectedIconPath: workbenchIcon,
            midButton: true,
        },
        {
            pagePath: '/pages/instance/index',
            // iconPath: userIcon,
            // selectedIconPath: userTintIcon,
            text: '案例',
        },
    ],
})

function switchTab(item: any) {
    uni.setStorageSync('currentTab', tabbar.list.indexOf(item))
    uni.switchTab({
        url: item.pagePath,
    })
}
onShow(() => {
    tabbar.current = uni.getStorageSync('currentTab') || 0
})
</script>
<template>
    <image src="../../static/images/bg.png" mode="scaleToFill"
        class="w-full h-screen absolute top-0 left-0 right-0 bottom-0 z-0" />
    <view
        class="w-full h-[50rpx] absolute top-0 left-0 right-0 z-10  flex flex-row justify-between items-center px-5 py-8">
        <image src="../../static/ETOLogo.png" mode="aspectFit" class="w-[400rpx] h-[80rpx]" />
        <view class="w-1/3 grid grid-cols-3 gap-y-5  h-[80rpx]">
            <view v-for="(it, index) in tabbar.list" :key="index"
                class="col-1 flex justify-center items-center flex-row px-5" @click="switchTab(it)">
                <view>
                </view>
                <view class="flex justify-center items-center flex-row text-20px h-full w-full"
                    :style="tabbar.current === index ? `color: #449df8; border-bottom: 2px solid #449df8;` : 'color:#000'">
                    {{ it.text }}
                </view>
            </view>
        </view>
    </view>
    <image src="../../static/ETOtext.png" mode="aspectFit"
        class="w-[300rpx] h-[70rpx] absolute  left-0 right-0 bottom-30 z-0 w-full" />
    <u-tabbar class="Tabbar" :list="tabbar.list" hide-tab-bar inactive-color="#9FA9BB" active-color="#449df8"
        :show="false" />
</template>


<style scoped lang='scss'></style>